import { Button, Space } from 'antd';
import React from 'react';
import useStore from '../../hooks/use-store';

export default function Counter() {
	const number = useStore(state => state.count)
	const lush = useStore(state => state.lush)
	const addNumber = useStore(state => state.addNumber)
	const subNumber = useStore(state => state.subNumber)
	const reset = useStore(state => state.resetNum)

	const clearForest = useStore(state => state.clearProperty)
	
	function checkNum(){
		if(number === 0){
			alert("已经到0了！！！")
		}else{
			subNumber();
		}
	}
	return (
		<div
			style={{
				display: 'flex', 
				justifyContent: 'center', 
				alignItems: 'center',
				width: '300px', 
				height: '300px', 
				border: '2px solid skyblue',
				flexWrap: 'wrap',
				// alignContent: 'center'
			}}
		>
			<div style={{width: '100%', textAlign: 'center'}}>
				<h1>计数器</h1>
				<h2>Count: {number}</h2>
				<h3>{lush.forest.contains.a}</h3>
			</div>
			<Space>
				<Button type='ghost' onClick={addNumber}>+ 1</Button>
				<Button type='ghost' onClick={checkNum}>- 1</Button>
				<Button type='default' onClick={reset}>清0</Button>
				<Button type='default' onClick={()=>{clearForest()}}>清空</Button>
			</Space>
		</div>
	);
}
